<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<title>工具</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css"/>
		<script src="js/jquery1.10.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.mobile-1.4.5.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.custom-corners .ui-bar {
			  -webkit-border-top-left-radius: inherit;
			  border-top-left-radius: inherit;
			  -webkit-border-top-right-radius: inherit;
			  border-top-right-radius: inherit;
			}
			.custom-corners .ui-body {
			  border-top-width: 0;
			  -webkit-border-bottom-left-radius: inherit;
			  border-bottom-left-radius: inherit;
			  -webkit-border-bottom-right-radius: inherit;
			  border-bottom-right-radius: inherit;
			}
		</style>
	</head>
	<body>
		<div data-role="page" data-fullscreen="true" id="one" data-theme="a">
			<div data-role="header">
				<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
				<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-icon-left ui-icon-gear">Button</a>
				<h1>工具类使用</h1>
				<div data-role="navbar">
					<ul>
						<li><a href="#two" class="ui-btn-active ui-state-persist">操作1</a></li>
						<li><a href="#">操作2</a></li>
						<li><a href="#">操作3</a></li>
					</ul>
				</div>
			</div>
			<div data-role="content" class="ui-body ui-body-a ui-corner-all">
				  <h1>Heading使用</h1>
				  <h3 class="ui-bar ui-bar-a">普通Heading</h3>
				  <h3 class="ui-bar ui-bar-a ui-corner-all">圆角Heading</h3>
			      <div class="ui-body">
			          <p>Lorem ipsum dolor sit ametper urna nec, vehicula lorem</p>
			      </div>
				  <div class="ui-body ui-body-a ui-corner-all">
			          <p>Lorem ipsum dolor sit ametper urna nec, vehicula lorem</p>
			      </div>
				  <br />
				  <div class="ui-body ui-body-a ui-corner-all">
					   <h3>Heading</h3>
				      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
				  </div>
				<div class="ui-corner-all custom-corners">
				  <div class="ui-bar ui-bar-a">
				    <h3>Heading</h3>
				  </div>
				  <div class="ui-body ui-body-a">
				    <p>Content</p>
				  </div>
				</div>
			</div>
			<div data-role="footer" data-position="fixed">
				<div data-role="navbar">
					<ul>
						<li><a href="#">Menu item 1</a></li>
						<li><a href="#" class="ui-btn-active ui-state-persist">Menu item 2</a></li>
						<li><a href="#">Menu item 3</a></li>
					</ul>
				</div>
				<h4 style="display:none;">Footer</h4>
			</div>
			
		</div>
		
	</body>
</html>
